<script setup>
import CPList from '@/components';
</script>

<template>
    <div class="style-container">
        <div class="style-show-container" v-show="showContent"></div>
        <div class="style-menu-list" :style="{ '--menubg': menuBg, '--i': scale }">
            <input class="style-keyword" type="text" v-show="showInput" placeholder="输入关键字查询" v-model="keyword">
            <button class="style-menu-list-quit" @click="listQuit"
                v-html="CPList.svgList['/src/assets/svg/menu-list-quit-icon.svg']"></button>
            <div class="style-bt-container">
                <button :class="item.type === CPList.ICON ? 'style-bt' : 'style-bt light-1'"
                    v-for="(item, i) in filterMenu" @click="loadAsyncComponent(item.comPath, item.type)"
                    v-html="item.btName"></button>
            </div>
        </div>
        <div class="style-bar">
            <div class="style-animated-tab-bar">
                <AnimatedTabBar ref="tabBar" :buttons="bts" @buttonDown="buttonHandle"></AnimatedTabBar>
            </div>
        </div>
    </div>
</template>

<script>
import AnimatedTabBar from '@/components/button/AnimatedTabBar.vue';
import DominoCircleLoading from '@/components/specialeffects/DominoCircleLoading.vue';
import ErrorEmote from '@/components/specialeffects/ErrorEmote.vue';
import { defineAsyncComponent, h, render } from 'vue';

export default {
    name: "StyleView",
    components: { AnimatedTabBar },
    data() {
        return {
            lastIndex: -1,
            menuBg: "#998181",
            scale: 0,
            showContent: false,
            showInput: false,
            keyword: "",
            bts: [
                {
                    bgColorItem: "#998181",
                    title: "图标",
                    param: {
                        eventName: "showIcon",
                        index: 0,
                    },
                    svg: CPList.svgList["/src/assets/svg/heart.svg"],
                },
                {
                    bgColorItem: "#c38841",
                    title: "按钮",
                    param: {
                        eventName: "showButton",
                        index: 1,
                    },
                    svg: CPList.svgList["/src/assets/svg/button.svg"],
                },
                {
                    bgColorItem: "#cd678d",
                    title: "特效",
                    param: {
                        eventName: "showEffect",
                        index: 2,
                    },
                    svg: CPList.svgList["/src/assets/svg/effect.svg"],
                },
                {
                    bgColorItem: "#8a8acb",
                    title: "样式",
                    param: {
                        eventName: "showStyle",
                        index: 3,
                    },
                    svg: CPList.svgList["/src/assets/svg/style.svg"],
                },
                {
                    bgColorItem: "#525553",
                    title: "组件",
                    param: {
                        eventName: "showComponent",
                        index: 4,
                    },
                    svg: CPList.svgList["/src/assets/svg/component.svg"],
                }
            ],
            list: [],
            iconList: [],
            buttonList: [],
            effectList: [],
            styleList: [],
            componentList: [],
        }
    },
    computed: {
        filterMenu: function () {
            let menus = [];
            if (!this.keyword || this.keyword === '') {
                menus = this.list;
                return menus;
            }
            for (const item of this.list) {
                if (item.btName.indexOf(this.keyword) > -1) {
                    menus.push(item);
                }
            }
            return menus;
        },
    },
    methods: {
        //显示菜单
        showMenu(i) {
            let isSame = this.lastIndex == i;
            if (isSame) {
                this.scale = 0;
                this.lastIndex = -1;
            } else {
                this.scale = 1;
                this.lastIndex = i;
            }
        },
        //延迟渲染
        renderAsyncComponent(component, timeout) {
            setTimeout(() => {
                const AsyncComp = defineAsyncComponent(() => { return Promise.resolve(component) });
                const instance = h(AsyncComp);
                const content = this.$el.parentElement.querySelector(".style-show-container");
                render(instance, content);
            }, timeout);
        },
        //加载错误组件
        renderErrorComponent() {
            const errorIns = h(ErrorEmote);
            const content = this.$el.parentElement.querySelector(".style-show-container");
            render(errorIns, content);
        },
        //加载动画
        renderLoadingComponent() {
            const load = h(DominoCircleLoading);
            const content = this.$el.parentElement.querySelector(".style-show-container");
            render(load, content);
        },
        //加载异步组件
        loadAsyncComponent(path, type) {
            //result是个import()返回的加载函数，该函数返回值是Promise
            var result = null;
            switch (type) {
                case CPList.ICON:
                    return;
                case CPList.BUTTON:
                    result = CPList.buttonComList[path];
                    break;
                case CPList.EFFECT:
                    result = CPList.effectComList[path];
                    break;
                case CPList.STYLE:
                    result = CPList.styleComList[path];
                    break;
                case CPList.COMMON:
                    result = CPList.commonComList[path];
                    break;
                default:
                    break;
            }

            this.showContent = true;
            this.scale = 0;
            this.lastIndex = -1;
            this.$refs.tabBar.initBar(this.bts.length);

            if (!result) {
                this.renderErrorComponent();
                return;
            }

            //渲染加载动画
            this.renderLoadingComponent();

            result().then(mod => {
                this.renderAsyncComponent(mod, 1000);
            }, err => {
                console.error(err);
                //延迟渲染异常组件
                setTimeout(() => this.renderErrorComponent(), 1000)
            });
        },
        //展示图标
        showIcon() {
            this.menuBg = this.bts[0].bgColorItem;
            this.list = this.iconList;
            this.showInput = false;
        },
        //展示按钮
        showButton() {
            this.menuBg = this.bts[1].bgColorItem;
            this.list = this.buttonList;
            this.showInput = true;
        },
        //展示特效
        showEffect() {
            this.menuBg = this.bts[2].bgColorItem;
            this.list = this.effectList;
            this.showInput = true;
        },
        //展示样式
        showStyle() {
            this.menuBg = this.bts[3].bgColorItem;
            this.list = this.styleList;
            this.showInput = true;
        },
        //展示组件
        showComponent() {
            this.menuBg = this.bts[4].bgColorItem;
            this.list = this.componentList;
            this.showInput = true;
        },
        buttonHandle(param) {
            this.showMenu(param.index);
            switch (param.eventName) {
                case "showIcon":
                    this.showIcon();
                    break;
                case "showButton":
                    this.showButton();
                    break;
                case "showEffect":
                    this.showEffect();
                    break;
                case "showStyle":
                    this.showStyle();
                    break;
                case "showComponent":
                    this.showComponent();
                    break;
                default:
                    break;
            }
        },
        listQuit() {
            this.scale = 0;
            this.lastIndex = -1;
            this.$refs.tabBar.initBar(this.bts.length);
        },
        //初始化
        init() {
            this.iconList = CPList.iconList;
            this.buttonList = CPList.buttonList;
            this.effectList = CPList.effectList;
            this.styleList = CPList.styleList;
            this.componentList = CPList.componentList;
        }
    },
    created() {
        this.init();
    },
    mounted() {

    }
}
</script>

<style scoped>
@import url('@/assets/css/button/light-1.css');

.style-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.style-show-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(49, 47, 47);
    display: flex;
    justify-content: center;
    align-items: center;
}

.style-menu-list {
    position: absolute;
    width: 80%;
    height: 80%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--menubg);
    border: 2px solid black;
    border-radius: 25px;
    transition: 0.5s;
    transform: scale(var(--i));
    z-index: 999;
}

.style-keyword {
    position: absolute;
    top: 2%;
    left: 40%;
    width: 300px;
    height: 50px;
    border-radius: 8px;
    font-size: 20px;
}

.style-menu-list-quit {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 10px;
    top: 10px;
    user-select: none;
    background-color: transparent;
    margin: 0;
    padding: 0;
    border-radius: 25px;
    cursor: pointer;
}

.style-bt-container {
    position: relative;
    top: 10%;
}

.style-bt {
    min-width: 50px;
    min-height: 50px;
    position: relative;
    margin: 20px;
    font-size: 25px;
    background-color: transparent;
}

.style-bar {
    position: absolute;
    top: 0;
    z-index: 999;
}

.style-bar>.style-animated-tab-bar {
    position: relative;
    top: -75px;
    transition: 0.5s;
}

.style-bar:hover>.style-animated-tab-bar {
    transform: translateY(75px);
}
</style>